<template>
	<a-modal
		:visible="props.visible"
		title="转让客户"
		:width="600"
		@cancel="emits('update:visible', false)"
		@ok="confirmAdd"
	>
		<a-form ref="formRef" :model="form" :rules="rules" :label-col="{ style: { width: '100px' } }" class="form_label">
			<a-form-item
				label="转让接收人"
				name="userId"
				extra="转让客户后，该客户及客户下的联系人将和您不在存在任何关系，且操作后无法回复"
			>
				<a-tree-select
					v-model:value="form.userId"
					:tree-data="store.selectableDeptList"
					allow-clear
					show-search
					tree-node-filter-prop="label"
					:fieldNames="fieldNames"
					max-tag-count="responsive"
					:dropdownMatchSelectWidth="false"
					treeNodeFilterProp="name"
				/>
			</a-form-item>
		</a-form>
	</a-modal>
</template>
<script setup>
	import customerApi from '@/api/biz/customerApi'
	import { globalStore } from '@/store'
	import { TreeSelect } from 'ant-design-vue'

	const store = globalStore()

	const props = defineProps({
		visible: {
			type: Boolean,
			default: false
		},
		customerCode: {
			type: String
		}
	})
	const emits = defineEmits(['update:visible', 'finished'])

	const SHOW_PARENT = TreeSelect.SHOW_PARENT
	const fieldNames = {
		label: 'name',
		value: 'id'
	}

	const form = ref({
		userId: ''
	})

	const rules = {
		userId: [{ required: true, message: '请选择转让接收人', trigger: 'blur' }]
	}
	const formRef = ref()
	const confirmAdd = () => {
		formRef.value.validate().then(() => {
			const { userId } = form.value
			customerApi
				.addCollaboratorOrTransfer({
					customerCode: props.customerCode,
					type: 1,
					userId: userId ? userId.substr(2) : ''
				})
				.then(() => {
					emits('update:visible', false)
					form.value = { userId: '' }
					emits('finished')
				})
		})
	}
</script>
<style lang="less" scoped>
	.form_label :deep(.ant-form-item-label > label) {
		color: rgb(107 114 128);
	}
	.form_label :deep(.ant-form-item-label > label::after) {
		color: transparent;
	}
</style>
